<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    @select="handleSelect"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b">
    <template v-for="(it,index) in menus">
      <el-menu-item :index="index.toString()" :key="'menu-item' + index">{{it.name}}</el-menu-item>
    </template>
  </el-menu>
</template>
<script>
export default {
  name:"navigation",
  data() {
    return {
      activeIndex: '1',
      menus: [
        {
          name: '表格',
          routerName: 'table'
        },
        {
          name: 'PDF',
          routerName: 'pdf'
        },
        {
          name: 'workflow',
          routerName: 'workflow'
        }
      ]
    };
  },
  methods: {
    handleSelect(key) {
      this.$router.push({
        name: this.menus[key].routerName
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-menu.el-menu--horizontal{
  padding: 0 30px;
}
.el-menu{
  width: 150px;
  overflow: hidden;
}
</style>
